.slide-menu {
	background: $color__salmon;
    padding: 0 20px;
    left: -70%;

    @media (min-width: 959px) {
        display: none;
    }

    &:not(.scotch-panel-left) {
        display: none;
    }

    h2 {
        position: relative;
        color: #fff;
        font-weight: 700;
        padding: 0.75rem 0;
        margin: 0;
        margin-top: 20px;
        font-size: 1rem;
    }

    .brand {
        padding: 22px 0;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,.25);
        img { margin-left: -20px; }
    }

    .slide-docs-nav {
        .slide-docs-version {
            @media (min-width: 501px) {
                display: none;
            }

            .btn {
                background-color: #ffffff;
                color: #262626;
                font-size: 13px;
                padding: 6px 12px;
                &:hover,
                &:active {
                    background-color: #f5f5f5;
                }
            }
        }

        > ul {
            list-style: none;
            padding: 0;
            margin: 0;
            > li {
                color: #fff;
                font-size: 18px;
                font-weight: 400;
                padding: 0;
                margin: 0;
                > ul {
                    border-top: 1px dashed rgba(0,0,0,.1);
                    list-style: none;
                    margin: 10px 0 0 0;
                    padding: 10px 0 0 0;
                    font-size: 13px;
                    line-height: 1.8;
                }
            }
        }
    }
    .slide-main-nav {
        list-style: none;
        padding: 25px 0;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,.1);

        a {
            font-weight: bold;
        }
    }

    a {
    	line-height: 1.5;
    	color: rgba(255,255,255,.9);
    	&:hover {
    		color: #fff;
    	}
    }
}

.docs .slide-main-nav .nav-docs { display: none; }

.wrap {
    position: relative;
}

.overlay {
    position: fixed;
    background: rgba(255,255,255, 0.75);
    width: 100%;
    height: 100%;
    display: none;
    z-index: 999999;
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;

    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;

    cursor: pointer;
}

.scotch-is-showing .overlay {
  display: block;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
